<template>
  <v-chart
    v-if="options.series.length"
    :theme="theme"
    :initOptions="initOptions"
    :loading="loading"
    :loadingOptions="loadingOptions"
    :options="config"
    v-on="$listeners"
    ref="pie"
  />
  <empty v-else />
</template>
<script>
import VChart from '../../Core'
import Empty from '../../Empty'
import { titleTextStyle, pieSeriesConfig } from '../../itemDefaultConfig'

export default {
  name: 'PieChart',
  components: {
    Empty,
    VChart,
  },
  props: {
    showTitle: {
      type: Boolean,
      default: false,
    },
    initOptions: Object,
    loadingOptions: Object, // loading 状态配置项
    loading: {
      type: Boolean,
      default: false,
    },
    radius: {
      type: [String, Array],
      default: function() {
        return ['35%', '50%']
      }, // [内半径, 外半径]
    },
    center: {
      type: Array,
      default: function() {
        return ['50%', '50%']
      }, // [x, y]
    },
    options: {
      type: Object,
      default: function() {
        return {
          title: { text: '' },
          series: [
            {
              data: [
                {
                  name: '示意1',

                  value: 200,
                },
                {
                  name: '示意2',
                  value: 600,
                },
              ],
            },
          ],
        }
      },
    },
    theme: {
      type: [String, Object],
      default: 'xm',
    },
  },

  data() {
    return {}
  },
  computed: {
    config() {
      const { title, legend, tooltip, showTitle, series, ...otherConfig } = this.options

      const option = {
        title: {
          ...titleTextStyle,
          show: showTitle, // title.show优先级高于showTitle
          ...title,
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          ...tooltip,
        },
        legend: {
          top: 'bottom',
          type: 'scroll',
          itemGap: 15,
          icon: 'pin',
          ...legend,
        },

        series: (series || []).map(item => ({
          ...pieSeriesConfig,
          radius: this.radius,
          center: this.center,
          ...item,
        })),
        ...otherConfig,
      }

      return option
    },
  },
  methods: {
    getEchartsInstance() {
      return this.$refs.pie.chart
    },
  },
}
</script>
